{include file="../application/admin/view/common/header.html" /}
<!--<style type="text/css">-->
<!--.btn-blue,.btn-blue:hover,.btn-blue:focus{background-color: #3171b4;border-color: #3171b4;color:#ffffff;}-->
<!--.table-btn,.table-btn:hover,.table-btn:focus{border-radius: 2px;-webkit-border-radius: 2px;text-transform: capitalize;font-size: 13px;padding: 0px 4px;font-weight: 400;color: #666666;background-color: #c3c3c3;}-->
<!--.enable{color: #3171b4}-->
<!--.disable{color: #ff2929}-->
<!--.table{text-align: center;}-->
<!--.table tbody{font-size: 13px;color: #333333;}-->
<!--.table tbody .buttons{padding: 3px;}-->
<!--.table thead{background-color: #aad4ff;}-->
<!--.table thead{font-size: 14px;font-weight: bold;color: #111111;}-->
<!--.table thead th{text-align: center;}-->
<!--.laydate_body .laydate_top{height: 36px;}-->
<!--</style>-->
<!--main content start-->
<section class="main-content">
    <!--start page content-->

    <div class="row">

        <div class="col-md-12">
            <div class="panel panel-default collapsed">
                <div class="panel-heading">
                    <div class="float-m" style="display: inline-block;">
                        <label>日期范围:</label>
                        <input type="text" id="logmin" class="input-text Wdate"
                               style="width:120px;display: inline-block;">
                        -
                        <input type="text" id="logmax" class="input-text Wdate"
                               style="width:120px;display: inline-block;">
                    </div>
                    <div class="search-form">
                        <input type="text" class="form-control" style="width:300px;" id="content"
                               placeholder="搜索访问ip/操作系统/浏览器/访问地址"/>
                        <button type="button" class="btn-search" id="search" style="right:-60px;"><i
                                class="fa fa-search"></i></button>
                    </div>
                </div>
                <div class="panel-body">

                    <table class="table table-hover table-striped table-bordered" data-page-size="12"
                           data-filter=#filter>
                        <thead>
                        <tr>
                            <th>访问ip</th>
                            <th>访问时间</th>
                            <th>操作系统</th>
                            <th>浏览器</th>
                            <th>访问地址</th>
                        </tr>
                        </thead>
                        <tbody id="contents">

                        </tbody>
                    </table>
                    <div class="pager" id="page" style="text-align: right;"></div>
                </div>
            </div>
        </div>
    </div><!--end row-->

    <!--end page content-->
</section>
<!--end main content-->


<!--Common plugins-->
<script src="_JS_/jquery.min.js"></script>
<script src="_JS_/jquery.base64.js"></script>
<script src="_JS_/jquery.cookie.js"></script>
<script src="_JS_/bootstrap.min.js"></script>
<script src="_JS_/jasny-bootstrap.min.js"></script>
<script src="_JS_/jquery.slimscroll.min.js"></script>
<script src="_JS_/jquery.nanoscroller.min.js"></script>
<script src="_JS_/metismenu.min.js"></script>
<script src="_JS_/float-custom.js"></script>
<script type="text/javascript" src="_JS_/layer/layer.js"></script>
<script type="text/javascript" src="_JS_/laypage/laypage.js"></script>
<script type="text/javascript" src="_JS_/laydata/laydate.js"></script>
<script type="text/javascript" src="_JS_/getMyDate.js"></script>
<!-- <script src="_JS_/footable.all.min.js"></script> -->
<!-- Page-Level Scripts -->
<script type="text/javascript">
    $(function () {
        $("#page-title").html("游客日志管理");
        postfile(1)
    });


    function postfile(page) {
        var logmin = $("#logmin").val();
        var logmax = $("#logmax").val();
        var username = $("#content").val();
        $.ajax({
            type: 'GET',
            url: "{:url('api/log/visitor_list')}",
            dataType: 'jsonp',
            jsonp: 'callback',
            data: {'page': page, 'logmin': logmin, 'logmax': logmax, 'username': username},
            beforeSend: function () {
                var index = layer.load(1, {
                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                });
            },
            success: function (msg) {
                layer.closeAll();
                $("#log_management").addClass("active").children("ul").addClass("in");
                $("#log_visitor").addClass("choose");
                if (msg.code == 200) {
                    var pages = Math.ceil(msg.data.count / 10);
                    $(".table tbody").html("");
                    if (msg.data.data.length > 0) {
                        for (var i = 0; i < msg.data.data.length; i++) {
                            var time = msg.data.data[i].time;
                            ltime = getMyDate(time * 1000);

                            var html = '<tr id="' + msg.data.data[i].id + '"><td>' + msg.data.data[i].ip + '</td>' +
                                '<td>' + ltime + '</td><td>' + msg.data.data[i].os + '</td>' +
                                '<td>' + msg.data.data[i].browser + '</td><td>' + msg.data.data[i].baseUrl + '</td>' +
                                '</tr>';
                            $(".table tbody").append(html);
                        }
                    }
                    //分页
                    $(".table").attr("pages", page);
                    laypage({
                        cont: 'page',
                        pages: pages,
                        curr: page,
                        jump: function (obj, first) {
                            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                postfile(obj.curr);
                            }
                        }
                    })
                } else {
                    layer.msg(msg.message, {icon: 5, time: 2000});
                }
            }
        })
    }


    // 搜索
    $('#search').click(function () {
        postfile(1);
    })

    //回车键绑定搜索
    $(".search-form").keydown(function (event) {
        if (event.keyCode == 13) {
            postfile(1);
        }
    });


    // log_ajax(1);
    // $("#search").on("click",function(){
    //     log_ajax(1);
    // });
    // function log_ajax(curr){
    //     var logmin = $("#logmin").val();
    //     var logmax = $("#logmax").val();
    //     var content = $("#content").val();
    //     $.ajax({
    //         type:"post",
    //         url:"{:url('api/Log/visitor_list')}",
    //         data:{
    //             "logmin":logmin,
    //             "logmax":logmax,
    //             "content":content,
    //             "curr":curr,
    //         },
    //         jsonp:"callback",
    //         dataType:"jsonp",
    //         beforeSend:function(){
    //             var index = layer.load(1, {
    //               shade: [0.2,'#666'],
    //               offset: ['50%','50%'],
    //             });
    //         },
    //         success:function(msg){
    //             ajax_page(msg.pages,curr);
    //             parent.layer.close(layer.index);
    //             var html = "";
    //             if(msg == ""){
    //                 html += "<tr><td colspan='5'>暂时无数据</td></tr>";
    //             }else{
    //                 $(msg.info).each(function(index,value){
    //                     html += "<tr>";
    //                     html += "<td>"+value.ip+"</td>";
    //                     html += "<td>"+formatDate(value.time)+"</td>";
    //                     html += "<td>"+value.OS+"</td>";
    //                     html += "<td>"+value.browser+"</td>";
    //                     html += "<td>"+value.all_url+"</td>";
    //                     html += "</tr>";
    //                 });
    //             }
    //             $("#contents").html(html);
    //             return false;
    //         },
    //         error:function(XMLHttpRequest, textStatus, errorThrown){
    //             parent.layer.close(layer.index);
    //             var html = "<tr><td colspan='5'>暂时无数据</td></tr>";
    //             $("#contents").html(html);
    //             return false;
    //         }
    //     });
    // }
    //
    // function ajax_page(allpage,nowpage){
    //     laypage({
    //         cont: 'page', // 容器
    //         pages: allpage,     // 总页数(后台的)
    //         curr: nowpage, //当前页(后台获取到的)
    //         jump: function(obj, first){ //触发分页后的回调(单击页码后)
    //             if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
    //                 log_ajax(obj.curr);  // (被单击的页码)
    //             }
    //         }
    //     });
    // }
    //
    // function  formatDate(time){
    //     var  now = new Date(time*1000);
    //     var  year=now.getFullYear();
    //     var  month = "0"+(now.getMonth()+1);
    //     var  month=now.getMonth()+1<10?"0"+(now.getMonth()+1):now.getMonth()+1;
    //     var  date=now.getDate()<10?"0"+now.getDate():now.getDate();
    //     var  hour=now.getHours()<10?"0"+now.getHours():now.getHours();
    //     var  minute=now.getMinutes()<10?"0"+now.getMinutes():now.getMinutes();
    //     var  second=now.getSeconds()<10?"0"+now.getSeconds():now.getSeconds();
    //     return year+"-"+month+"-"+date+"   "+hour+":"+minute+":"+second;
    // }

    //日期范围限制
    var start = {
        elem: '#logmin',
        format: 'YYYY-MM-DD',
        min: '1970-01-01', //设定最小日期为当前日期
        max: laydate.now(), //最大日期
        istime: false,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };

    var end = {
        elem: '#logmax',
        format: 'YYYY-MM-DD',
        min: '1970-01-01',
        max: laydate.now(),
        istime: false,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，充值开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);

</script>
</body>
</html>